<script setup >
import {ref} from "vue"
import {captcha, register} from "../../api/login/login";
import {goHome, goInfo, goLogin} from "../../tools/go";
import {setAuto, setToken, setUserId} from "../../store";
import Bcheckbox from "../../components/form/checkbox/Bcheckbox.vue";
import {bDialogue, bMessage} from "../../components/popup/popup.js";

let form = ref({
  userName: '',
  password: '',
  rePassword:'',
  captchaKey: '',
  isAUTO: false,
  userNameRule: [
      value => {
          if (value) return true
          return '请输入用户名'
      },
      value => {
          if (value.length >= 3 && value.length <= 20) return true
          return '用户名需要3-20个字符的范围'
      }
  ],
  passwordRule: [
      value => {
          if (value) return true
          return '请输入密码'
      }
  ],
  rePasswordRule: [
      value => {
        if (value) return true
        return '请再次输入密码'
      },
      value => {
          if (value === form.value.password) return true
          return '两次输入的密码不一致'
      }
  ],
  captchaRule: [

      value => {
          if (value) return true
          return '请输入验证码'
      }
  ]
})


const sub = () => {
  if (form.value.userName.length >= 3 &&
      form.value.userName.length <= 20 &&
      form.value.password != null &&
      form.value.rePassword != null &&
      form.value.rePassword === form.value.password &&
      form.value.captchaKey != null
  ){
    register(form.value).then(res => {
       //console.log(res)
      if(res.code === 200){
        form.value.password = ''
        form.value.rePassword = ''
        setUserId(res.data.id)
        setToken(res.data.token)
        setAuto({
          username: form.value.userName,
          auth: res.data.auth
        })
        goInfo()
      }else{
        form.value.userName = '';
        form.value.password = '';
        form.value.rePassword = '';
        let msg = res.msg  === '' ? '系统出错' : res.msg;
        bDialogue("错误信息提示", msg);
      }

    })
  }
}

let captchaImg = ref('')

const getCaptcha = () => {
  captcha().then(res => {
    captchaImg.value = res.data
  })
}

const init = () => {
  getCaptcha()
}

init()

</script>

<template>
<view class="back">
  <view class="logo">
    <img src="../../static/img/logo.png" alt="">
    <text>智慧社区</text>
  </view>
  <v-form>
    <v-container>
      <v-row>
        <v-col cols="12" md="4">

          <v-text-field
              v-model="form.userName"
              :rules="form.userNameRule"
              required
          >
            <template v-slot:prepend>
              <text :width="200"  class="reg_title" >用户名：</text>
            </template>
          </v-text-field>
        </v-col>

        <v-col cols="12" md="4">
          <v-text-field
              v-model="form.password"
              type="password"
              :rules="form.passwordRule"
              required
          >
            <template v-slot:prepend>
              <text :width="200"  class="reg_title" >创建密码：</text>
            </template>
          </v-text-field>
        </v-col>

        <v-col cols="12" md="4">
          <v-text-field
              v-model="form.rePassword"
              type="password"
              :rules="form.rePasswordRule"
              required
          >
            <template v-slot:prepend>
              <text :width="200"  class="reg_title" >确认密码：</text>
            </template>
          </v-text-field>
        </v-col>

        <v-col cols="12" md="4" align-self="center">
          <v-text-field
              v-model="form.captchaKey"
              :rules="form.captchaRule"
              required
          >
            <template v-slot:prepend>
              <v-img :width="120" cover aspect-ratio="16/9" :src="captchaImg" @click="getCaptcha"/>
            </template>
          </v-text-field>

        </v-col>

        <v-col cols="12" md="4" class="other">
            <view >
              <text @click="goLogin">已有账号，去登录</text>
            </view>

            <view>
                <bcheckbox v-model="form.isAUTO" label="自动登录"></bcheckbox>
            </view>

        </v-col>

        <v-col>
            <v-btn block @click="sub" class="submit" >注册</v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</view>
</template>

<style scoped lang="scss">
@use "../../static/css/main";

.back {
  .title {
    width: 100%;
    padding: 20vw 10vw 10vw 10vw;
    font-size: 9vw;
    font-weight: 300;
  }
  .other {
    display: flex;
    justify-content: space-between;
  }
  .v-col-12{
    display: flex;
    padding: 0 12px;
    justify-content: space-around;
  }

  .reg_title{
    padding-top: 20px;
  }
  .v-text-field .v-input__details{
    padding-inline: 0;
  }
  :deep .v-input--density-default .v-field__input{
    border:none;
  }


  @include main.useTheme() {
    .title {
      color: main.getVal("title_color");
    }
    background-color: main.getVal("primary_bg_color");
  }
  height: 100vh;
}

.logo {
  text {
    font-size: 30px;
    color: #E07320;
  }
  img{
    width:100px;
  }
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
}

.submit {
  margin: 25px auto;
  width: 80%;
  height: 40px;
  border-radius: 15px;
  text-align: center;
  line-height: 40px;
  color: #FFFFFF;
  font-size: 20px;
  background: #E07320;
}

</style>